<template>
	<view class="pageItem">
		<view class="main">
			<view class="card">
				<view class="user_img" @click="up_img">
					<image class="img" :src="headimg"></image>
					<view class="u_icon iconfont">&#xe6b0;</view>
				</view>
				<view class="c_row">
					<view class="tit">{{$t('use.user_id')}}</view>
					<view class="val">{{userInfo.id}}</view>
				</view>
			<!-- 	<view class="c_row">
					<view class="tit">{{$t('use.mail')}}</view>
					<input class="val" :disabled="true" v-model="email" type="text" :placeholder="$t('use.no_txt_tip')"/>
				</view> -->
				<view class="c_row">
					<view class="tit">{{$t('use.user_name')}}</view>
					<input class="val" type="text" v-model="nickname" :placeholder="$t('use.no_txt_tip')"/>
				</view>
			</view>
		</view>
		<view class="_footer">
			<view class="btn sub" @click="to_save">{{$t('use.save')}}</view>
		</view>
	</view>
</template>

<script>
	import {
	  mapState
	} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				nickname : '',
				email : '',
				img_change : 0,
				headimg : '/static/my/user_img.png',
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			if(this.hasLogin){
				this.nickname = this.userInfo.nickname;
				this.email = this.userInfo.email;
				this.headimg = this.realUrl(this.userInfo.headimg);
			}
		},
		methods:{
			to_save(){
				try{
					if(this.nickname == ''){
						throw this.$t('system.tip21');
					}
					// if(!helper.check_email(this.email)){
					// 	 this.showMsg(this.$t('system.tip22'));
					// 	 return false;
					// }
					
				}catch(err){
					this.showMsg(err);
					return false;
				}
				uni.$u.throttle(this.real_save, 1200)
			},
			real_save(){
				
				let url = this.site_url + 'api/auth/member/set_handle';
				let param = {
					email : this.email,
					nickname : this.nickname
				};
				if(this.img_change == 1){
					param.headimg = this.headimg;
				}
				this.areq(url,param,'POST').then(res=>{
					  if(res.code == 1){
						     this.showMsg(this.$t('system.tip34'),1500, false, "success")
							uni.$emit('auto_update');
							setTimeout(()=>{
								 this.backTo();  
							},1200)
							
					  }else{
						    this.showMsg(res.msg)
					  }
					
				})
			
			},
			up_img(e) {
				
				uni.showModal({
				    title: this.$t('system.tip'),
				    content: this.$t('system.tip23'),
				    success:  (rs) => {
				        if (rs.confirm) {
				            console.log('用户点击确定');
							uni.chooseImage({
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album', 'camera'], //从相册选择
								success: res =>{
									let file = res.tempFiles[0];
									let m2 = 2097152;
									if(file.size > m2){
									  this.showMsg(this.$t('system.tip24'),2500);
									  return false;
									}
									let path = res.tempFilePaths[0];//图片选择完成后 获取该图片的路劲
									this.urlTobase64(path).then(res=>{
										 this.img_change = 1;
							             this.headimg = res;
									});
								}
							});
						
				        } else if (rs.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			urlTobase64(url){
				var promise = new Promise((resolve, reject) => {
					// #ifdef MP-WEIXIN
					uni.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => { //成功的回调
							//console.log(res);
							let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
							resolve(base64);
						},
						fail: (e) => {
							console.log("图片转换失败");
							reject(0);
						}
					})
					// #endif
					// #ifndef MP-WEIXIN
					uni.request({
						url: url,
						method: 'GET',
						responseType: 'arraybuffer',
						success: ress => {
							let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
							//	console.log(base64)
							base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
							resolve(base64);
						},
						fail: (e) => {
							console.log("图片转换失败");
							reject(0);
						}
					})
					// #endif
				});
				return promise;
			},
			
		},
		
	}
</script>

<style lang="scss">
.main{
	width: 100%;
	padding: 4vw 4% 0;
	.card{
		@include card_style();
		.user_img{
			width: 30%;
			margin-left: 35%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 2vw 0 3vw;
			.img{
				width: 20vw;
				height: 20vw;
				border-radius: 20vw;
				position: relative;
				z-index: 1;
			}
			.u_icon{
				width: 10vw;
				padding: 1.5vw 0;
				background: #2E2E2E;
				border-radius: 3vw;
				font-size: 2.8vw;
				color: $main_color;
				text-align: center;
				margin-top: -3vw;
				position: relative;
				z-index: 2;
			}
		}
		.c_row{
			width: 100%;
			display: flex;
			align-items: center;
			color: $main_color5;
			margin-top: 6vw;
			.tit{
				width: 32vw;
				font-size: 3.8vw;
				font-weight: bold;
			}
			.val{
				
			}
		}
	}
}
._footer{
	@include page_button();
	margin-top: 15vw;
}		
</style>
